<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>通栏</title>
	<style type="text/css">
	*{margin: 0;
		padding: 0;}
	.top{
		height: 100px;
		background-color:orange;
		margin: 10px auto;
		border:1px dashed #ccc;
		text-align: center;
		margin-bottom: 8px;}
	.banner{width: 960PX;
		height: 150px;
		background-color:red;
		margin: 0 auto;
		border:1px dashed #ccc;
		text-align: center;
	margin-bottom: 8px;}

.small{width: 960PX;
		height: 100px;
		background-color:red;
		margin: 0 auto;
		background-color: pink;}
.small ul li{width: 231PX;
		height: 100px;
		background-color:black;
		margin-left: : 15px;
		border:1px dashed #ccc;
	     display: inline-block;
	     list-style: none;
	    }
     .small .one{margin-left:0;}
	</style>
</head>
<body>
	<div class="top">顶部</div>
	<div class="banner">标题</div>
	<div class="small">
	<ul>
	<li class="one">1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li></ul></div>
</body>
</html>